<script setup lang="ts">
// 不需要在这里导入Vant组件,因为我们已经全局引入了
import { useUserStore } from './stores'
import { rq } from '@/utils/request'

const userStore = useUserStore()

const login = () => {
  // 设置一条模拟的用户信息数据
  userStore.setUser({ id: '1', mobile: '15244667237', account: 'dark', avatar: '', token: 'q1w2e3r4t5y6u7i8o9p0' })
  console.log('用户已登录')
}

const logout = () => {
  userStore.delUser()
  console.log('用户已退出登录')
}


const fetchUserData = async () => {
  try {
    const response = await rq('/inthepink/myUser', 'get');
    console.log('用户数据:', response);
  } catch (error) {
    console.error('获取用户数据失败:', error);
  }
};

</script>

<template>
<div>
  <van-button type="primary">主要按钮</van-button>
  <van-button type="success">成功按钮</van-button>



  <hr>

  <van-button type="primary" @click="login">登录</van-button>

  <van-button type="danger" @click="logout">退出</van-button>

  <button @click="userStore.setUser({ id: '1', mobile: '15244667237', account: 'dark', avatar: '', token: 'q1w2e3r4t5y6u7i8o9p0' })">
    登录
  </button>

  
  <div v-if="userStore.user">
    <h3>用户信息：</h3>
    <p>账号：{{ userStore.user.account }}</p>
    <p>手机号：{{ userStore.user.mobile }}</p>
    <p>ID：{{ userStore.user.id }}</p>
    <van-image
      width="100"
      height="100"
      :src="userStore.user.avatar"
      alt="用户头像"
    />
  </div>
  <p v-else>未登录</p>

  <hr>



  <van-button type="primary" @click="fetchUserData">获取用户数据</van-button>


</div>
</template>

<style scoped>
/* 样式保持不变 */
</style>